import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// import Stats from 'three/examples/jsm/libs/stats.module.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import MoGlb from '@/assets/three3d/mo.gltf'
import { modifyCityDefaultMaterial } from '@/three3d/shader/modifyCityMaterial'
let scene, camera, renderer
// let stats = new Stats()
// stats.setMode(0)
// 导出初始化 3d 场景和内容的函数
export function init3d() {
  const dom = document.querySelector('.canvas-3d')
  scene = new THREE.Scene()

  // 设置场景世界的背景色
  scene.background = new THREE.Color (0x0f151e)

  // 相机
  camera = new THREE.PerspectiveCamera(75, dom.clientWidth / dom.clientHeight,0.1,1000)

  // 像机初始位置
  camera.position.set(10,10,10);


  // antialias：true 抗锯齿处理（让渲染的图形边更光滑）
  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(dom.clientWidth, dom.clientHeight)
  dom.appendChild(renderer.domElement)


  // 性能监视器
  // document.body.appendChild(stats.domElement)


  // 轨道控制器
  const controls = new OrbitControls(camera,renderer.domElement)


  // 阻尼效果 缓慢的停止转动摄像机
  controls.enableDamping = true
  // 阻尼系数 缓慢的速率大小
  controls.dampingFactor = 0.125



  // 加载本地的模型
  const loader = new GLTFLoader()
  loader.load(MoGlb,(obj) => {
    // 把模型加入到世界中 gltf文件对象加载的模型在scene属性中
    scene.add(obj.scene)
    // 除了模型自带的一个平行光源，我们再加入一个平行光，让模型亮一点
    addLight()
    const target = obj.scene.getObjectByName('楼顶')
    // modifyCityDefaultMaterial(target)
  })



  // 渲染循环 不断地渲染
  function renderLoop() {
  renderer.render(scene,camera)
  // stats.update()
  requestAnimationFrame(renderLoop)
  }
  renderLoop()
}

function addLight() {
  // 平行光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(10,10,10);
  scene.add(directionalLight)
}